<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="close"
    :title="$t('service.editDia.退款详情')"
    width="600px"
  >
    <div class="h-500 overflow-y-auto">
      <div class="flex lht-38">
        <div class="text-right w-120 color-666666 flex-shrink-0">
          {{ $t('service.editDia.退款编号') }}：
        </div>
        <div class="color-333333">{{ row["saleNo"] }}</div>
      </div>
      <div class="flex lht-38">
        <div class="text-right w-120 color-666666 flex-shrink-0">
          {{ $t('service.editDia.订单编号') }}：
        </div>
        <div class="color-333333">{{ row["sourceSaleNo"] }}</div>
      </div>
      <div class="flex lht-38">
        <div class="text-right w-120 color-666666 flex-shrink-0">
          {{ $t('service.editDia.退款状态') }}：
        </div>
        <div class="color-333333">
          {{ refundStatusMap[row["refundStatus"] || "--"] }}
        </div>
      </div>
      <div class="flex lht-38">
        <div class="text-right w-120 color-666666 flex-shrink-0">
          {{ $t('service.editDia.申请商品') }}：
        </div>
        <div class="color-333333">{{ sku["skuName" + locale] || "--" }}</div>
      </div>
      <div class="flex lht-38">
        <div class="text-right w-120 color-666666 flex-shrink-0">
          {{ $t('service.editDia.退款金额') }}(元)：
        </div>
        <div class="color-333333">{{ sku["refundReal"] }}</div>
      </div>
      <div class="flex lht-38">
        <div class="text-right w-120 color-666666 flex-shrink-0">
          {{ $t('service.editDia.退款数量') }}：
        </div>
        <div class="color-333333">{{ sku["refundSkuCount"] }}</div>
      </div>
      <div class="flex lht-38">
        <div class="text-right w-120 color-666666 flex-shrink-0">{{ $t('service.editDia.会员名') }}：</div>
        <div class="color-333333">{{ row["vipNickName"] }}</div>
      </div>
      <div class="flex lht-38">
        <div class="text-right w-120 color-666666 flex-shrink-0">
          {{ $t('service.editDia.退款原因') }}：
        </div>
        <div class="color-333333">{{ row["refundAskReasonName"] }}</div>
      </div>
      <div class="flex lht-38">
        <div class="text-right w-120 color-666666 flex-shrink-0">
          {{ $t('service.editDia.退款凭证') }}：
        </div>
        <div class="color-333333">
          <el-image
            v-if="row.refundAskSkuImage"
            style="width: 100px; height: 100px"
            :src="row.refundAskSkuImage"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[row.refundAskSkuImage]"
            show-progress
            :initial-index="4"
            fit="cover"
            preview-teleported
          />
          <span v-else>{{ $t('service.editDia.暂无凭证') }}</span>
        </div>
      </div>
      <div class="flex lht-38">
        <div class="text-right w-120 color-666666 flex-shrink-0">
          {{ $t('service.editDia.退款明细') }}：
        </div>
        <div class="color-333333" v-for="item in step">
          <div class="" v-if="item.time">
            <span>{{ moment(item.time).format("YYYY-MM-DD HH:mm:ss") }}</span>
            <span class="ml10">{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>
  </Dialog>
</template>
<script setup>
import { ref, watch, watchEffect } from "vue";
import Dialog from "@/components/dialog.vue";
import { orderStatusMap, refundStatusMap, refundTypeMap } from "./data";
import { useI18n } from "vue-i18n";
import moment from "moment";

const { locale, t: $t } = useI18n();
const show = defineModel();

const list = ref([
  { label: $t('service.editDia.退款编号'), key: "sourceSaleNo" },
  { label: "订单号", key: "xxx" },
  { label: $t('service.editDia.退款状态'), key: "refundStatus" },
  {
    label: $t('service.editDia.申请商品'),
    key: "xxx",
  },
  { label: "退款方式", key: "xxx" },
  { label: $t('service.editDia.退款金额') + "(元)", key: "payTotal" },
  { label: $t('service.editDia.退款数量'), key: "xxx" },
  { label: $t('service.editDia.会员名'), key: "S1886291273" },
  { label: $t('service.editDia.退款原因'), key: "不想要了" },
  { label: $t('service.editDia.退款凭证'), key: "--" },
  {
    label: $t('service.editDia.退款明细'),
    key: [
      "2025-03-05 16:17:45 买家申请仅退款",
      "2025-03-08 16:20:00 商家超时未处理，系统自动确认同意仅退款申请",
    ],
  },
]);
const props = defineProps({
  row: {
    type: Object,
    default: () => ({}),
  },
  sku: {
    type: Object,
    default: () => ({}),
  },
});
//仅退款
const step1 = ref([
  {
    label: $t('service.editDia.买家申请仅退款'),
    time: "2025-03-18 10:00:00",
    icon: "fabu",
  },
  {
    label: $t('service.editDia.商家处理仅退款申请'),
    time: "2025-03-18 10:00:00",
    icon: "fabu",
  },
  {
    label: $t('service.editDia.退款完成'),
    time: "2025-03-18 10:00:00",
    icon: "fabu",
  },
]);

//退款退货
const step2 = ref([
  {
    // -2
    label: $t('service.editDia.买家申请仅退款'),
    time: "2025-03-18 10:00:00",
    icon: "fabu",
  },
  {
    // refundCheckTime
    label: $t('service.editDia.商家处理退款退货申请'),
    time: "2025-03-18 10:00:00",
    icon: "fabu",
  },
  {
    // refundVipSendTime
    label: $t('service.editDia.买家已发货'),
    time: "2025-03-18 10:00:00",
    icon: "fabu",
  },
  {
    // -6
    label: $t('service.editDia.退款完成'),
    time: "2025-03-18 10:00:00",
    icon: "fabu",
  },
]);

const step = ref([]);

watchEffect(() => {
  const {
    refundAskType,
    refundStatus,
    refundAskTime,
    refundCheckTime,
    refundSignTime,
    refundVipSendTime,
  } = props.row;

  if (refundAskType == 1) {
    // 仅退款
    step.value = step1.value;
    step.value[0].time = refundAskTime;
    step.value[1].time = refundCheckTime;
    step.value[2].time = refundSignTime;
  } else {
    //退货退款
    step.value = step2.value;
    step.value[0].time = refundAskTime;
    step.value[1].time = refundCheckTime;
    step.value[2].time = refundVipSendTime;
    step.value[3].time = refundSignTime;
  }
});
watch(show, (val) => {
  if (val) {
  }
});
const handleSubmit = () => {};
const close = () => {
  show.value = false;
};
</script>
<style lang="scss" scoped>
.h-500 {
  height: 500px;
}
.lht-38 {
  line-height: 38px;
}
.w-120 {
  width: 120px;
}
</style>
